import React from 'react';
import {render} from 'react-dom';
import Todo from './Todo.js'
import TodoActions from '../action/TodoActions.js';
import TodoStore from '../store/TodoStore.js';
//声明一个跟组件 顶层容器  控制器组件
class TodoController extends React.Component{

	constructor(props){
		super(props);
		this.addTodo=this.addTodo.bind(this);
		this.removeTodo=this.removeTodo.bind(this);
		this.state={
			todolist:TodoStore.getAll()
		}
	}

	addTodo(text){
		//直接操作this.setState()
		//这里去直接操作action
		TodoActions.addTodoItem(text);
	}

	removeTodo(index){
		TodoActions.removeTodoItem(index);
	}

	//DOM加载完成去做监听
	componentDidMount(){
		var that=this;
		TodoStore.addChangeListener(function(){
			//第一个去拿一下数据
			var todolist=TodoStore.getAll();
			that.setState({
				todolist:TodoStore.getAll()
			})
		})
	}
	render(){
		return(
			<Todo onClick={this.addTodo} removeTodo={this.removeTodo} list={this.state.todolist}/>
		)
	}
}

//暴露接口es6写法
export default TodoController